<template>
    <div class="serch_container">
        <div class="input_container flex justify-center">
            <el-input v-model="searchKeyword" style="width: 400px" size="large" placeholder="发现资源" @keydown.enter="handleSearch">
                <template #append>
                    <el-button type="primary" :icon="Search" @click="handleSearch" />
                </template>
            </el-input>
        </div>
        <div class="tab_container bg-white flex gap-5 pa-1 mt-15 ">
            <div v-for="item in panelList" :key="item.id" :class="['cursor-pointer','pa-2',{'tab_item':activeName===item.id}]" @click="handleChangeTab(item.id)">{{ item.name }}</div>
        </div>
        <div class="search_result_container bg-white mt-5 pa-5">
            <template v-if="activeName===1">
                <ArticleList  
                    :list="taskList!"
                    :pagination="pagination"
                    @refresh="handleRefresh">
                </ArticleList>
            </template>
            <template v-if="activeName===2">
                <UserList :data="userList" :pagination="pagination" @refresh="handleRefresh"></UserList>
            </template>
        </div>
    </div>
</template>
<script lang="ts" setup>
import {ref,onMounted,reactive} from 'vue'
import {Search} from '@element-plus/icons-vue'
import ArticleList from '@/components/ArticleList.vue';
import UserList from '@/components/UserList.vue';
import {useRoute} from 'vue-router'

const route = useRoute()

const searchKeyword:any= ref(route.query.searchText)
const handleSearch=()=>{

}


const activeName=ref(1)
const panelList=[
    {
        name: '综合',
        id: 1,
    },
    {
        name: '用户',
        id: 2,
    },
]


const handleChangeTab=(id)=>{
    activeName.value = id
    pagination.pageNum = 1
    getData()
}


const pagination=reactive({
    pageSize:10,
    pageNum:1,
    total:0,
})

const taskList=ref([])
const userList=ref([])
const getData=async ()=>{
    const quertData={
        searchValue:searchKeyword.value,
        pageSize:pagination.pageSize,
        pageNum:pagination.pageNum
    }
    const result= service.task.getDataBySearchKey(quertData)
    console.log('result=>',result)
}

const handleRefresh = (pagination?: any) => {
  if (pagination) {
    pagination.pageSize = pagination.pageSize
    pagination.pageNum = pagination.pageNum
  }
  getData()
}

onMounted(()=>{
    getData()
})

</script>
<style lang="scss" scoped>
.serch_container{
    .tab_container{
        border-radius: 5px;
        .tab_item{
            border-bottom: 3px solid #409EFF;
        }
    }

}
</style>